从零开发一套完整的vue项目开发环境 |
您所在的位置:网站首页 › vue install webpack › 从零开发一套完整的vue项目开发环境 |
不管是工作需要还是面试加分,vue技术栈已经成为了前端开发工程师必备的技术点。接下来,我将从零开发一套完整的vue项目开发环境,提供给需要的同行小伙伴观看也方便自己以后复习。 项目源码地址:github.com/tangmengche… 目标彻底 Vue 官方脚手架 Cli 帮我们初始化做了那些事,通过 webpack4.x 帮我们完成了哪些常见功能: ES6/7/8/9等高级语法转换成ES5 stylus/less/scss等css预处理器转换成css 解析字体font、图片(jpg、png...)等静态资源 压缩js、css等文件 自动添加css各大浏览器厂商前缀 定义环境变量 抽离公共代码 项目热更新和懒加载 区别生产环境和开发环境 每次打包删除上一次打包记录 ... 项目初始化 检查 node 环境配置先本地全局安装node环境,vue的运行是依赖于node的npm的管理工具来实现的,node下载地址。下载好node之后,打开cmd管理工具,输入node -v,回车,查看node版本号,出现版本号则说明安装成功 node -v npm -v 复制代码2. 初始化项目目录 在命令行依次输入: mkdir my-vue-cli 新建项目目录 cd my-vue-cli/ 切换到项目目录 npm init 生成项目的一些信息,最终会生成一个package.json文件。注意:可以输入npm init -y可以不用按回车 复制代码3. 安装 webpack webpack 是一个模块打包机,自动分析项目依赖的模块以及一些浏览器不能直接转换的高级语法等转换成浏览器可以解析的 js、css文件等。在项目根目录本地安装webpack, 本项目将使用webpack4.x版本 npm install webpack webpack-cli -D 复制代码4. 初始化项目目录和文件 在项目根目录新建一下文件: src: 存放项目源码的目录 index.js: 需要被 webpack 编译的文件 build:存放项目的 webpack 配置文件 webpack.config.js 项目的webpack核心配置文件 index.html: 项目打包后自动将打包的文件添加在该文件里面 复制代码如果项目dist目录生成了一个bundle.js文件,说明webpack打包正确.
重点:当我们执行打包后,打包的文件里含有大量的重复代码,那么我们需要提供统一的模块化的helper来减少这些helper函数的重复输出。 npm install @babel/runtime @babel/plugin-transform-runtime -D @babel/runtime就是提供统一的模块化的helper, 使用能大大减少打包编译后的体积 @babel/plugin-transform-runtime它会帮我自动动态require @babel/runtime中的内容 注意:还有一些常见的babel: @babel/plugin-proposal-decorators将es6+中更高级的特性转化---装饰器 @babel/plugin-proposal-class-properties将es6中更高级的API进行转化---类 复制代码
2. stylus/less/scss等css预处理器转换成css 在项目src目录中添加index.less文件,并在index.js文件中引入其文件以下就以less预处理器为例,详细介绍下其用法,其余两种类似: 安装相关依赖 npm install stylus stylus-loader less less-loader sass-loader node-sass css-loader style-loader -D css-loader主要的作用是解析css文件, 像@import等动态语法 style-loader主要的作用是解析的css文件渲染到html的style标签内 stylus、less、sass是CSS的常见预处理器 stylus-loader、less-loader、sass-loader主要是将其对应的语法转换成css语法 复制代码 修改核心配置文件webpack.config.js
注意:在生产模式下,webpack自动将JS进行压缩。MiniCssExtractPlugin 推荐只用于生产环境,因为该插件在开发环境下会导致HMR功能缺失,所以日常开发中,还是用style-loader。
2. 修改核心配置文件webpack.config.js
5. 常用选项以及插件的使用方法 大家都习惯的Ctrl+S保存代码后就想浏览器自动刷新来更新我们的页面 安装相关依赖 npm install webpack-dev-server -D 复制代码 修改核心配置文件webpack.config.js目前绝大多数的vue项目里核心业务代码都是.vue文件结尾的,但浏览器不支持对.vue文件的解析,故需webpack将.vue文件转换为浏览器能识别的js文件。 安装相关依赖 npm install vue-loader vue-template-compiler cache-loader thread-loader -D npm install vue -S vue-loader 作用解析.vue文件 vue-template-compiler 作用编译模板 cache-loader 作用缓存loader编译的结果 thread-loader 作用使用 worker 池来运行loader,每个 worker 都是一个 node.js 进程 vue 一个用于构建用户界面渐进式的MVVM框架 复制代码修改核心配置文件webpack.config.js
在项目根目录新建App.vue文件 测试123 export default { } 复制代码 修改index.js import Vue from 'vue'; import App from './App.vue'; new Vue({ render: h => h(App) }).$mount('#app') 复制代码通过以上操作后执行npm run build,则可以看到webpack将.vue文件解析为浏览器可以识别的js语法。也可以通过运行npm run dev看到浏览器页面上会渲染出123。 Vue集成VueRouter和Vuex 安装相关依赖 npm install vue-router vuex -S vue-router是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌 vuex是一个专为 Vue.js 应用程序开发的状态管理模式 复制代码 集成vue-router 新建Home.vue和About.vue两个组件 // Home.vue home1231 export default { name: 'Home' } 复制代码 // About.vue about export default { name: 'About' } 复制代码 新增路由的配置文件 在项目的src目录里,新建/src/router/index.js。注意:在加载路由时,可以使用路由懒加载的方式进行加载组件 import Vue from 'vue'; import VueRouter from 'vue-router'; // import Home from '../views/Home.vue'; // import About from '../views/About.vue'; Vue.use(VueRouter); // 向Vue再注册路由 export default new VueRouter({ mode: 'hash', routes: [ { path: '/Home', name: 'Home', // component: Home component: () => import(/* webpackChunkName: "Home" */ '../views/Home.vue') // 路由懒加载方式 }, { path: '/about', name: 'About', // component: About component: () => import(/* webpackChunkName: 'About' */ '../views/About.vue') }, { path: '*', // 匹配任何路由 redirect: '/Home' } ] }) 复制代码 修改index.js文件 import Vue from 'vue' import App from './App.vue' import router from './router' new Vue({ router, // 新增 render: h => h(App) }).$mount('#app') 复制代码 扩展 引入Element UI 添加管理系统常见的布局(左右布局+上面导航) ... |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |